<template>
	<view class="container">
		<view class="content">
			<view class="user-info">
				<view class="name-box">
					<view class="name">
						<span class="name-l">「</span>{{name}}<span class="name-r">」</span>
					</view>
					<view class="invite">
						邀您加入
					</view>
				</view>
				<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/accept-header-blue3.png" class="desc" mode="widthFix">
				</image>
				<view class="title-1">汇聚国内顶级专家和项目资源</view>
				<view class="title-2">助力企业创新</view>
			</view>
			<view v-if="active===false" class="input-box">
				<view class="input-title-1">
					无门槛免费领取<span>{{registerNum}}</span>积分
				</view>
				<view class="input-title-2">
					<span>{{programName}}成果转化联盟，快来加入吧！</span>
				</view>
				<input class="item-phone" type="number" v-model="phoneNum" placeholder="输入手机号" />
				<view class="verify-code-box">
					<input class="vcode" type="number" v-model="verifyCode" placeholder="输入验证码" />
					<view class="btn-get" @click="sendVerifyCode">
						{{countTips}}
					</view>
				</view>
				<view class="btn-use" @click="goUse">
					立即加入
				</view>
				<image class="invite-5" src="https://www.innovationgloble.com/wxs/img/wx/invite-5.png"></image>
			</view>
			<view v-else class="input-box">
				<view class="box-title-1">恭喜您，</view>
				<view class="box-title-2">加入{{programName}}成果转化联盟！</view>
				<view class="box-title-3">
					<span>{{registerNum}}</span>注册积分
				</view>
				<view class="box-title-4">
					已存入{{phoneNum}}账户！
				</view>
				<view class="btn-use" @click="goIntegral">
					查看首页
				</view>
				<image class="invite-5" src="https://www.innovationgloble.com/wxs/img/wx/invite-5.png"></image>
				<image mode="widthFix" class="invite-6" src="https://www.innovationgloble.com/wxs/img/wx/accept-gift.png"></image>
			</view>
		</view>
		<view class="accept-note">
			*该活动仅针对新用户，已注册用户的手机号不能领取积分
		</view>
	</view>
</template>

<script>
	import InviteItem from '../../components/page-componnet/invite-item.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		programName
	} from '@/common/config'
	import {loginUrl} from "@/utils/index.js"
	export default {
		components: {
			InviteItem
		},
		data() {
			return {
				name: "",
				phoneNum: '',
				verifyCode: '',
				shareNum: '',
				count: 60,
				countTips: '获取验证码',
				active: false,
				inviteNum: '',
				registerNum: '',
				programName: programName
			}
		},
		onLoad: function(options) {
			console.log('options ', options);
			if (options.name) {
				this.name = options.name;
			}
			if (options.id) {
				this.userId = options.id;
			}
			if (options.shareNum) {
				let shareNum = options.shareNum
				shareNum = shareNum.replace(/\%3D/ig, "=");
				this.shareNum = shareNum;
				console.log('接受的参数', this.shareNum)
			}
			if (options.inviteNum) {
				this.inviteNum = options.inviteNum
			}
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				//&是我们定义的参数链接方式
				let userId = scene.split("&")[0];
				let recommendId = scene.split('&')[1];
				//其他逻辑处理。。。。。
			}
			this.getWxCode()
			this.loadRegisterNum();
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			//获取注册积分数量
			loadRegisterNum() {
				this.$request.get({
					url: 'UserIntegralHistory/selectRegIntegral'
				}).then(res => {
					console.log('注册积分数量', res)
					this.registerNum = res;
				})
			},
			sendVerifyCode() {
				let self = this;
				if (!(/^1[345789]\d{9}$/).test(this.phoneNum)) {
					uni.showToast({
						title: "请输入正确手机号",
						icon: 'none'
					});
					return;
				}
				this.$request.post({
					url: 'message/sendMessage',
					data: {
						telephoneNumber: this.phoneNum,
					}
				}).then(res => {
					self.timer = setInterval(() => {
						if (self.count > 0) {
							self.count = self.count - 1;
							self.countTips = `${self.count}s`
						} else {
							self.count = 60;
							self.timer && clearInterval(self.timer);
							self.countTips = '获取验证码';
						}
					}, 1000);
				});
			},
			//获取微信code
			getWxCode() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.wxLogin(loginRes.code)
					}
				});
			},
			//将code传给后台
			wxLogin(code) {
				let that = this;
				this.$request.get({
					url: loginUrl,
					data: {
						code: code,
					},
				}).then(res => {
					this.sessionKey = res.sessionKey;
					const openid = res.openid;
					this.openid = openid;
					uni.setStorageSync('openid', openid);
				})
			},
			goHome() {
				uni.switchTab({
					url: "/pages/home/home",

				});
			},
			goIntegral() {
				uni.switchTab({
					url: "/pages/home/home",
				});
			},
			goUse() {
				if (!(/^1[345789]\d{9}$/).test(this.phoneNum)) {
					uni.showToast({
						title: "请输入正确手机号",
						icon: 'none'
					});
					return;
				}
				if (this.verifyCode.length === 0) {
					uni.showToast({
						title: "请输入验证码"
					});
					return;
				}
				this.$request.post({
					url: 'user/miniLogin',
					data: {
						phoneNumber: this.phoneNum,
						message: this.verifyCode,
						gkOpenId: this.openId,
						shareNum: this.shareNum
					},
				}).then(res => {

					if (res.type === 'old') {
						uni.showToast({
							icon: 'none',
							title: '已注册的手机号，无法参与活动'
						})
					} else if (res.type === 'new') {
						uni.setStorageSync('userInfo', res);
						this.saveUserInfo(res);
						getApp().connectWS();
						this.active = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		width: 100%;
		min-height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.accept-note {
			width: 626upx;
			margin: 0 auto;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 300;
			color: rgba(255, 255, 255, 1);
			margin-top: 31upx;
			line-height: 24upx;
		}

		.invite-5 {
			position: absolute;
			right: 0;
			top: 0;
			width: 123upx;
			height: 128upx;
		}

		.invite-6 {
			position: absolute;
			right: 53upx;
			top: 253upx;
			width: 116upx;
		}

		.invite-logo {
			position: absolute;
			right: 20upx;
			top: 0;
			height: 80upx;
			width: 200upx;
		}

		.container {
			width: 100%;
			min-height: 100vh;
			background: url('https://www.innovationgloble.com/wxs/img/wx/invite-1.png') no-repeat center;
			background-size: cover;
			height: 1484upx;

			.content {
				padding: 0 62upx;

				.user-info {
					padding-top: 95upx;

					.name-box {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 20upx;
						box-sizing: border-box;
						// padding: 0 20upx;

						.invite {
							font-size: 27upx;
							color: #FFFFFF;
						}

						.name {
							font-size: 40upx;
							color: #37FFFD;

							.name-l {
								color: #37FFFD;
								font-size: 40upx;
								font-weight: 300;
							}

							.name-r {
								color: #37FFFD;
								font-size: 40upx;
								font-weight: 300;
							}
						}
					}

					.desc {
						color: #FFFFFF;
						height: 57upx;
						margin: 18upx auto;
						width: 100%;
					}

					.title-1 {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 300;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						color: #FFFFFF;
						letter-spacing: 4upx;
					}

					.title-2 {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 300;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						color: #FFFFFF;
						margin-bottom: 82upx;
						letter-spacing: 4upx;
					}
				}

				.input-box {
					width: 626upx;
					height: 640upx;
					background: rgba(255, 255, 255, 1);
					border-radius: 18upx;
					box-sizing: border-box;
					padding: 8upx 53upx 30upx 53upx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					.box-title-1 {
						font-size: 40upx;
						font-family: PingFang SC;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
						line-height: 40upx;
						width: 100%;
						text-align: left;
						margin-bottom: 30upx;
						margin-top: 50upx;
					}

					.box-title-2 {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
						width: 100%;
						text-align: left;
						line-height: 32upx;
						margin-bottom: 100upx;
					}

					.box-title-3 {
						color: #333333;
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 600;
						width: 100%;
						text-align: left;
						margin-bottom: 20upx;

						span {
							color: #EA3228;
							font-size: 35upx;
						}
					}

					.box-title-4 {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
						line-height: 32upx;
						width: 100%;
						text-align: left;
						margin-bottom: 100upx;

					}

					.input-title-1 {
						color: #333333;
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						width: 100%;
						text-align: left;

						span {
							color: #1859DF;
							font-weight: bold;
							font-size: 48upx;
							display: inline-block;
							margin-left: 8upx;
							margin-right: 8upx;
						}
					}

					.input-title-2 {
						width: 100%;
						text-align: left;
						margin-bottom: 65upx;
						z-index: 999;

						span {
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							position: relative;

							&::after {
								content: '';
								display: block;
								position: absolute;
								bottom: 0;
								left: 0;
								width: 490upx;
								height: 16upx;
								background: rgba(24, 89, 223, 1);
								opacity: 0.2;
							}
						}
					}

					.verify-code-box {
						position: relative;
						box-sizing: border-box;
						background-color: #F5F5F5;
						width: 100%;
						height: 84upx;
						border-radius: 5upx;
						margin-bottom: 37upx;
						padding: 0 30upx;

						.vcode {
							width: 140upx;
							line-height: 84upx;
							height: 84upx;
						}

						.btn-get {
							position: absolute;
							right: 32upx;
							top: 20upx;
							bottom: 0;
							color: #1859DF;
							font-size: 27upx;
							height: 84upx;
							height: 84upx;
						}
					}

					.item-phone {
						width: 100%;
						background-color: #F5F5F5;
						height: 84upx;
						margin-bottom: 38upx;
						box-sizing: border-box;
						background-color: #F5F5F5;
						padding: 0 30upx;
					}

					.item {
						width: 460upx;
						height: 84upx;
						background-color: #F5F5F5;
						margin-bottom: 30upx;
						background-color: #F5F5F5;
						padding: 0 30upx;
					}

					.btn-use-u {
						width: 500upx;
						height: 84upx;
						background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 170, 56, 1) 100%);
						border-radius: 45upx;

						text-align: center;
						line-height: 84upx;
						color: #BC3800;
						margin-top: 240upx;
						margin-bottom: 30upx;
					}

					.tips {
						display: flex;
						flex-direction: row;
						align-items: center;

						.txt {
							font-size: 32upx;
							color: #FFFFFF;
						}

						.phone {
							color: #FFF560;
							font-size: 32upx;
						}
					}

					.btn-use {
						width: 100%;
						height: 90upx;
						background: rgba(24, 89, 223, 1);
						border-radius: 5upx;
						font-size: 27upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						line-height: 90upx;
					}
				}
			}
		}

		.bot-box {
			width: 750upx;
			height: 612upx;
		}
	}
</style>
